<template>
  <div class="defaultAlgoList">
    <a-table :columns="tableColumns" :data-source="dataList" :pagination="false" :loading="loading" @change="tableChange">
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex == 'cpu'">
          <div class="noun">
            CPU:{{ record.cpu }}Core
            <span class="mid-line"></span>
            内存:{{ record.memory }}GB
            <span class="mid-line"></span>
            显存:{{ record.gpu }}GB
          </div>
        </template>
        <template v-else-if="column.dataIndex == 'type'">
          <div :class="[record.type && 'type-mark']">
            {{ ALGO_TYPE_OPTIONS.find((item: any) => item.value === record.type)?.label || '/' }}
          </div>
        </template>
        <template v-else-if="column.dataIndex == 'createTime'">
          <div>
            {{ dateFormat(record.createTime) }}
          </div>
        </template>

        <template v-else-if="column.dataIndex === 'tools'">
          <a-dropdown placement="bottom" @click.stop>
            <a-button type="text" class="icon-only-btn" @click.stop>
              <i class="iconfont icon-more-line"></i>
            </a-button>
            <template #overlay>
              <a-menu>
                <a-menu-item class="menu-icon-item" @click="operate(1, record as AlgoType)"> 复制 </a-menu-item>
                <a-menu-item class="menu-icon-item" @click="operate(2, record as AlgoType)">训练</a-menu-item>
                <a-menu-item class="menu-icon-item" @click="operate(3, record as AlgoType)"> 下载 </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </template>
        <template v-else> {{ replaceEmptyStr(record[column.dataIndex as string]) }} </template>
      </template>
    </a-table>

    <g-pagination v-model:offset="pageForm.offset" v-model:limit="pageForm.limit" :total="pageForm.total" @change="getDataList" />
  </div>
</template>

<script lang="ts" setup>
  import { message, TableProps } from 'ant-design-vue'
  import { dateFormat } from 'g6-fn'
  import { onMounted, ref } from 'vue'

  import useList from '@/hooks/use-list'
  import { algoDevApi } from '@/services'
  import { filterTableColumns, replaceEmptyStr } from '@/utils'

  import { ALGO_TYPE_OPTIONS } from '../../options'
  import { AlgoType } from '../types'
  import { useExportListDrawer } from './ExportListDrawer/store'

  const emit = defineEmits(['changeTab'])
  const exportListDrawerStore = useExportListDrawer()

  type TableDataType = {
    key: string
    name: string
    age: number
    address: string
  }
  type PageForm = {
    name: string
    type: number | string
    columns: 'updateTime' | 'createTime'
    order: 'desc' | 'asc'
  }
  /**
   * 表格列
   */
  const tableColumns = ref(
    filterTableColumns([
      {
        title: '名称',
        dataIndex: 'name',
        width: 180
      },
      {
        title: '类型',
        dataIndex: 'type',
        width: 140
      },
      {
        title: '镜像',
        dataIndex: 'imageName',
        width: 200
      },
      {
        title: '框架',
        dataIndex: 'frame',
        width: 80
      },
      {
        title: '资源配置',
        dataIndex: 'cpu',
        width: 300
      },
      {
        title: '描述',
        dataIndex: 'remark'
      },
      {
        title: '创建时间',
        dataIndex: 'createTime',
        isSort: true,
        width: 160
      },
      {
        title: '操作',
        width: 80,
        dataIndex: 'tools'
      }
    ])
  )
  const { pageForm, dataList, loading, getDataList } = useList<PageForm, AlgoType>(algoDevApi.defaultAlgoList, {
    name: '',
    type: '',
    columns: 'createTime',
    order: 'desc'
  })
  const tableChange: TableProps<TableDataType>['onChange'] = (pagination, filters, sorter: any) => {
    pageForm.value.order = sorter.order === 'ascend' ? 'asc' : 'desc'
    pageForm.value.columns = sorter.field
    if (!sorter.order) {
      pageForm.value.columns = 'createTime'
      pageForm.value.order = 'desc'
    }
    getDataList({ offset: 1 })
  }

  const operate = async (type: number, item: AlgoType) => {
    switch (type) {
      case 1: // code
        let res = await algoDevApi.copyAlgo({}, { urlParams: { id: item.id } })
        message.success('复制成功')
        break
      case 2: // 训练
        console.log('训练')
        break
      case 3: // 下载
        exportListDrawerStore.addDownTask(item.id as any as string)
        break
      default:
        console.log('other')
    }
  }
  onMounted(() => {
    getDataList()
  })
  defineExpose({
    search: (params: PageForm) => {
      if (params) {
        Object.assign(pageForm.value, params)
        getDataList()
      }
    }
  })
</script>

<style lang="less" scoped>
  .type-mark {
    display: inline-block;
    padding: 3px 6px;
    color: #4686ed;
    background: #f2f6fe;
    border: 1px solid @mask1;
    border-radius: 6px;
    line-height: 22px;
  }

  .noun {
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    // span {
    //   overflow: hidden; /* Hide overflow content */
    //   margin-right: 10px; /* Optional: space between items */
    //   text-overflow: ellipsis; /* Show ellipsis for overflowing text */
    //   white-space: nowrap; /* Prevent text from wrapping */
    //   flex: 0 1 auto; /* Prevent elements from growing */
    // }

    .mid-line {
      display: inline-block;
      margin: 0 4px;
      width: 1px;
      height: 14px;
      background-color: #e8e9eb;
    }
  }
</style>
